import React, { Component } from 'react'
import { Swiper } from 'react-vant';
import axios from "axios";
const images = [
    'https://img.yzcdn.cn/vant/apple-1.jpg',
    'https://img.yzcdn.cn/vant/apple-2.jpg',
    'https://img.yzcdn.cn/vant/apple-3.jpg',
    'https://img.yzcdn.cn/vant/apple-4.jpg',
    'https://img.yzcdn.cn/vant/apple-5.jpg',
    'https://img.yzcdn.cn/vant/apple-6.jpg',
    'https://img.yzcdn.cn/vant/apple-7.jpg',
    'https://img.yzcdn.cn/vant/apple-8.jpg',
];


export class Index extends Component {
    constructor(props) {
        super(props)

        this.state = {
            list: [],
        }
    }
    componentDidMount() {
        axios.get("/api/list").then(res => {
            this.setState({
                list: res.data
            })
        })
    }
    render() {
        const { list } = this.state;
        return (
            <div className='index'>
                <Swiper autoplay={1000}>
                    {
                        images.length ?
                            images.map((item, index) => {
                                return <Swiper.Item key={index}>
                                    <img src={item} alt="" />
                                </Swiper.Item>
                            }) : "暂无数据"
                    }
                </Swiper>

                <ul className='indexList'>
                    {
                        list.length ?
                            list.map((item, index) => {
                                return <li key={item.id}>
                                    <img src={item.img} alt="" />
                                    <p>{item.title}</p>
                                </li>
                            }) : "暂无数据"
                    }
                </ul>
                <ol className='plist'>
                    {
                        list.length ?
                            list.map((item, index) => {
                                return <li key={item.id}>
                                   <img src={item.img} alt="" />
                                    <p>{item.title}</p>
                                </li>
                            }) : "暂无数据"
                    }
                </ol>
            </div>

        )
    }
}

export default Index